<template>
  <div class="bg">
    <div class="logo"></div>
    <div class="signin-form">
      <el-form
        :model="params"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="0"
        class="login-container"
      >
        <h3 class="login_title">User login</h3>
        <el-form-item label prop="userName">
          <el-input
            v-model="params.userName"
            auto-complete="off"
            @keyup.native.enter="loginBtn('ruleForm')"
            clearable
            placeholder="user name"
          ></el-input>
        </el-form-item>
        <el-form-item label prop="password">
          <el-input
            auto-complete="off"
            v-model="params.password"
            @keyup.native.enter="loginBtn('ruleForm')"
            show-password
            placeholder="password"
          ></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 100%; background: blue; border: none"
            @click="loginBtn('ruleForm')"
            >Login</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import JSEncrypt from 'jsencrypt';
import {
  adminLogin, 
} from "./axios/api";
export default {
  data() {
    return {
      // 自动登录
      autoLogin: false,
      params: {
        userName: "",
        password: "",
      },
      rules: {
        userName: [
          { required: true, message: "please fill in username", trigger: "blur" },
        ],
        password: [{ required: true, message: "please fill in password", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.$forceUpdate();
  },
  created() {},
  methods: {
    // Get rsakey
    getLogin(data) {
      let params = {
        username: this.params.userName,
        password: data,
      };
      adminLogin(params).then((res) => {
        if (res.stat == 1) {
          this.$message.success("Login success");
          this.$router.push({
            path: "/index",
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    loginBtn(formName) {
      this.$refs[formName].validate((valid) => {
        
        if (valid) {
          let encryptStr = new JSEncrypt();
          encryptStr.setPublicKey(
            "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAmN4YEMigCgNQCl8yxD9v5r2CSy9ebZhbrpTqe3Sx67JogPtlp7gAf5t2kqh7AZUX4eKSOAzSdHrdbQ55GQITExLyedQI/1LteeI103BsI7mTS/bsnekXcnuocJp/ij5NV3czMdNkBzxVmywL87GsP/2YNKswpUAlu4ufQ7syYm2Mr0kYVp3DnG1iLdUbkjKLEcBLBIBCiduc8EtoJkvJweQ3ZF6+muKGYCrHQ5wJx3pUSKC5ks+fJJHsrVdtMCh8RUNOdHqxc6N0RRx0VjaAK4Vwjvob3W8CEXpllrOEPoHCU6EJ5O2gZUWwkTdWA4VqbU7oc7eLGwuQXCNh523pLwIDAQAB"
          ); // 设置 加密公钥
          let data = encryptStr.encrypt(this.params.password.toString()); // 进行加密
          this.getLogin(data);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    checked() {},
  },
};
</script>

<style lang="scss">
.bg {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("~@/assets/image/bg.jpg");
  background-size: cover;
}
.logo {
  position: relative;
  width: 345px;
  height: 94px;
  //background-image: url("~@/assets/image/logo.png");
  top: 90px;
  left: 200px;
}
.signin-form {
  position: relative;
  top: 300px;
  margin-left: 800px;
}
.login-container {
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  height: 260px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  margin-top: 0;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: left;
  color: blue;
}
.three-button {
  float: right;
}
</style>
